<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-form [formGroup]="formGroup" class="formGroup">
    <lv-form-item>
        <lv-form-label lvRequired>
            {{'common_name_label' | i18n}}
        </lv-form-label>
        <lv-form-control [lvErrorTip]="baseUtilService.nameErrorTip">
            <input lv-input type="text" formControlName="name" class="custom-width" />
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label lvRequired>
            {{'protection_cluster_label' | i18n}}
        </lv-form-label>
        <lv-form-control [lvErrorTip]="baseUtilService.requiredErrorTip">
            <lv-select formControlName="cluster" [lvOptions]='clusterOptions' lvValueKey='value' lvFilterKey='label'
                lvFilterMode='contains' class="custom-width" lvShowFilter>
            </lv-select>
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label lvRequired>
            {{'protection_name_space_label' | i18n}}
        </lv-form-label>
        <lv-form-control [lvErrorTip]="namespaceErrorTip">
            <lv-select formControlName="namespace" [lvOptions]='namespaceOptions' lvValueKey='value' lvMode='multiple'
                class="custom-width" lvShowFilter lvShowCheckAll lvFilterKey='label' lvFilterMode='contains'>
            </lv-select>
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label lvRequired>
            {{'common_table_label' | i18n}}
        </lv-form-label>
        <lv-form-control>
            <lv-group [lvColumns]='["400px", "16px", "400px"]' lvRowGutter="4px">
                <div class="tree-container">
                    <div class="custom-table-header">{{'protection_selectable_table_label' | i18n}}</div>
                    <div class="custom-table-header">{{'common_name_label' | i18n}}</div>
                    <aui-tables (onSelectionChange)="selectionChange($event)"></aui-tables>
                </div>
                <div class="arrow-container">
                    <i lv-icon="aui-select-arrow"></i>
                </div>
                <div class="tree-container hbase-selected-table">
                    <lv-datatable [lvData]="selectedTableData" #lvSelectTable [lvScroll]="{y: '480px'}" lvSize="small"
                        [lvPaginator]='page'>
                        <thead>
                            <tr>
                                <th>
                                    <lv-group class="th-group">
                                        <span>{{'protection_selected_table_label' | i18n}}</span>
                                        <span class="aui-link" (click)="clearSelected()">
                                            {{'protection_clear_all_label' | i18n}}
                                        </span>
                                    </lv-group>
                                </th>
                            </tr>
                            <tr>
                                <th>{{'protection_table_path_label' | i18n}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let item of lvSelectTable.renderData">
                                <td>
                                    <lv-group class="th-group">
                                        <span>{{item.name}}</span>
                                        <i lv-icon="lv-icon-close" lvTooltipTheme="light" lvColorState='true'
                                            (click)="remove(item)"></i>
                                    </lv-group>
                                </td>
                            </tr>
                        </tbody>
                    </lv-datatable>
                    <ng-container *ngIf="selectedTableData.length">
                        <lv-paginator #page lvMode='simple' lvShowPageSizeOptions="false" class="table-paginator"
                            lvPageSize="20">
                        </lv-paginator>
                    </ng-container>
                </div>
            </lv-group>
        </lv-form-control>
    </lv-form-item>
</lv-form>